<template>
<div>
    <div class="header">
        <div class="header-left">
            <span class="iconfont">&#xe685;</span>
        </div>
        <div class="header-input">
            <span class="iconfont">&#xe67d;</span>
            输入城市/景点/主题
        </div>
        <router-link to="/city">
            <div class="header-right">{{this.city}}
            <span class="iconfont">&#xe600;</span>
        </div>
        </router-link>
    </div>
  </div>    
</template>

<script>
import { mapState ,mapGetters } from 'vuex'
import hub from '@/assets/js/hub.js'
 export default {
    computed:{
        ...mapState(['city']),
        ...mapGetters({//相当于state里面的计算属性
            double2:'double'
        })
    },
    data(){
        return{
            lastCity:''//记录上一次city 当city发生改变的时候重新发送数据请求
        }
    },
    mounted(){
       this.lastCity=this.city;

    },
    activated () {
    //与mounted区别  加keepalive后 路由切换mounted只会执行一次
    //而因为有keepalive 就会多出来一个actived钩子函数，每次页面重新被显示的时候会执行
    if(this.lastCity!==this.city){
    this.lastCity=this.city;
    hub.$emit('sendRequest')//城市发生变化的时候就要去重新发起数据请求  触发兄弟组件
    }
},
    
};
</script>

<style lang="stylus" scoped>
@import '~@/assets/css/varibles.styl'
@import '~@/assets/css/ellipsis.styl'
    .header
        display :flex;
        height :0.86rem;
        line-height 0.86rem
        text-align center
        background-color $bgColor;
        color #fff 
        .header-left
            width: .64rem
            float: left
        .header-input
            flex :1;
            border-radius .1rem
            margin-top .12rem
            margin-left .2rem
            background-color #fff
            height .6rem
            color #ccc
            line-height .6rem
            text-align left 
            padding-left .2rem
        .header-right
            min-width: 1rem
            padding 0 0.1rem
            float :right
            text-align center
            color #fff
            span
                font-size .2rem
        
</style>